<nz-affix #affix
          *ngIf="fixed;else phTpl"
          [nzOffsetTop]="fixedOffsetTop">
  <ng-template [ngTemplateOutlet]="phTpl"></ng-template>
</nz-affix>
<ng-template #phTpl>
  <div class="page-header">
    <div [ngClass]="{'page-header__wide': wide}">
      <nz-skeleton [nzLoading]="loading"
                   [nzTitle]="false"
                   [nzActive]="true"
                   [nzParagraph]="{rows: 3}"
                   [nzAvatar]="{ size: 'large', shape: 'circle' }">
        <ng-container *ngIf="!breadcrumb; else breadcrumb">
          <nz-breadcrumb *ngIf="paths && paths.length > 0">
            <nz-breadcrumb-item *ngFor="let i of paths">
              <ng-container *ngIf="i.link">
                <a [routerLink]="i.link">{{i.title}}</a>
              </ng-container>
              <ng-container *ngIf="!i.link">{{i.title}}</ng-container>
            </nz-breadcrumb-item>
          </nz-breadcrumb>
        </ng-container>
        <div class="page-header__detail">
          <div *ngIf="logo"
               class="page-header__logo">
            <ng-template [ngTemplateOutlet]="logo"></ng-template>
          </div>
          <div class="page-header__main">
            <div class="page-header__row">
              <h1 *ngIf="_titleVal || _titleTpl"
                  class="page-header__title">
                <ng-container *ngIf="_titleVal; else _titleTpl">{{_titleVal}}</ng-container>
              </h1>
              <div *ngIf="action"
                   class="page-header__action">
                <ng-template [ngTemplateOutlet]="action"></ng-template>
              </div>
            </div>
            <div class="page-header__row">
              <div class="page-header__desc"
                   (cdkObserveContent)="checkContent()"
                   #conTpl>
                <ng-content></ng-content>
                <ng-template [ngTemplateOutlet]="content"></ng-template>
              </div>
              <div *ngIf="extra"
                   class="page-header__extra">
                <ng-template [ngTemplateOutlet]="extra"></ng-template>
              </div>
            </div>
          </div>
        </div>
        <ng-template [ngTemplateOutlet]="tab"></ng-template>
      </nz-skeleton>
    </div>
  </div>
</ng-template>
